<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="wrap">
        <button class="btn">新增</button>
        <div class="list">
            <li class="first a b c">01</li>
            <li>02</li>
            <li class="mid">03</li>
            <li>04</li>
            <li>05</li>
            <li class="last">06</li>
        </div>
    </div>
</body>
<script>
    // getElementsByClassName() IE8 以下有问题
    // var first = document.getElementsByClassName("first")[0];
    // console.log(first);

    // document.querySelector IE7 以下有问题
    // var first = document.querySelector(".first");
    // console.log(first);

    // 需求:  模拟封装 getElementsByClassName(className)  => 从页面中所有的元素含有指定class名的元素

    // 如何获取页面的所有元素?
    // (1)   document.all
    // (2)   document.getElementsByTagName("*")

    var result = myGetElementsByClassName("first");
    console.log(result);

    function myGetElementsByClassName(className) {
        // var className = "first";
        var all = document.getElementsByTagName("*");
        console.log(all);

        var arr = [];
        for (var i = 0; i < all.length; i++) {
            var ele = all[i];  //遍历集合 => 每一个html元素
            var _class = ele.getAttribute("class");
            // console.log(_class);
            if (_class) { // 如果含有class名

                // 有问题 class名可能有多个 "first a b c"
                // if(_class === className){
                //     arr.push(ele);
                // }

                // 有问题 "first123123 a b c" 也包含 "first"
                // if(_class.indexOf(className)!=-1){
                //     arr.push(ele);
                // }

                // 有问题?  IE8以及以下 没有indexOf() 方法
                // var classList = _class.split(" ");
                // // console.log(classList);
                // if(classList.indexOf(className)!=-1){
                //     arr.push(ele);
                // }


                // 有问题?  IE8以及以下 没有indexOf() 方法
                var classList = _class.split(" ");
                // console.log(classList);
                if (myIndexOf(classList, className) != -1) {
                    arr.push(ele);
                }


            }

        }
        return arr;
    }

    function myIndexOf(arr, char) {
        // var arr = [1,2,3,4];
        // var char = "1";

        var index = -1; //假设不存在 -1
        for (var i = 0; i < arr.length; i++) {
            var item = arr[i];
            if (item === char) {
                index = i;  //存在就记录下标
            }
        }
        return index;
    }


    // 总结
    // 常见的IE兼容 (JS)
    // 1. IE 和 常规浏览器的语法不同,写兼容

    function first(ele) {
        if (ele.firstElementChild) { //常规浏览器
            return ele.firstElementChild;
        } else {
            return ele.firstChild;
        }
    }

    // 2. IE低版本 没有对应的方法 => 兼容(模拟封装)

    function myIndexOf(arr, char) {
        // var arr = [1,2,3,4];
        // var char = "1";

        var index = -1; //假设不存在 -1
        for (var i = 0; i < arr.length; i++) {
            var item = arr[i];
            if (item === char) {
                index = i;  //存在就记录下标
            }
        }
        return index;
    }

</script>

</html>